var container = document.querySelector('ul');
var labels = document.querySelectorAll("li");
var line = document.getElementsByClassName('line')[0];
var initial = 20; 
var star = 20;
var time;
labels.forEach(function(item){
    item.onclick = function(){         
        labels.forEach(function(temp){
            temp.classList.remove("change")
        })
        item.classList.add("change");
        clearInterval(time);
        animation(item.offsetLeft);
        star = item.offsetLeft;
    }
    item.onmouseover= function(){       
        clearInterval(time);
        animation(item.offsetLeft);
    }
    item.onmouseout= function(){       
        clearInterval(time);
        animation(star);
    }
})
// 动画
function animation(goal){
   initial = line.offsetLeft;
    time = setInterval(function(){
         initial += (goal-initial)/10;
         line.style.left = initial +'px';        
         if(line.offsetLeft==goal){
             clearInterval(time);
         }    
    },30)
}